<!-- 工序分析柱状图 -->
<template>
  <div class="chart-main-container">
    <div class="chart-wrapper">
      <div class="chart">
        <div
          ref="processChartRef"
          class="chart-container"
          :style="containerStyle"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import * as echarts from "echarts";

  const processChartRef = ref(null);
  const props = defineProps({
    data: {
      type: Object,
      required: true,
    },
    width: {
      type: Number,
      default: 250,
    },
    height: {
      type: Number,
      default: 250,
    },
  });

  onMounted(() => {
    if (processChartRef.value) {
      const chart = echarts.init(processChartRef.value);
      const option = {
        color: ["#5cc4a7", "#8170cb", "#f9a647", "#4bacc6"], // 扩展颜色方案
        tooltip: {
          trigger: "axis", // 折线图通常使用 axis 触发
          //formatter: "{a} <br/>{b}: {c}", // 折线图不需要百分比
          backgroundColor: "rgba(50,50,50,0.9)",
          borderColor: "#333",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          extraCssText: "box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);",
        },

        xAxis: {
          type: "category",
          data: ["钣金", "注塑", "测试"], // 示例数据，根据实际情况修改
          axisLabel: {
            rotate: 30, //倾斜角度
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "输入",
            type: "bar", // 修改为折线图
            data: [
              { value: 10, name: "钣金" },
              { value: 1, name: "注塑" },

    
            ],
            animationType: "scale", // 动画效果
            animationEasing: "elasticOut", // 弹性动画
            itemStyle: {
              borderRadius: [5, 5, 0, 0], // 圆角效果
              borderColor: "#fff",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            animationDelay: function (idx) {
              return Math.random() * 200; // 随机延迟增加动感
            },
          },
          {
            name: "输出",
            type: "bar", // 修改为折线图
            data: [
              { value: 0, name: "钣金" },
              { value: 4, name: "注塑" },

            ],
            animationType: "scale", // 动画效果
            animationEasing: "elasticOut", // 弹性动画
            itemStyle: {
              borderRadius: [5, 5, 0, 0], // 圆角效果
              borderColor: "#fff",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            animationDelay: function (idx) {
              return Math.random() * 200; // 随机延迟增加动感
            },
          },
        ],
        backgroundColor: "#fff", // 白色背景更专业
        textStyle: {
          fontFamily: "Arial, sans-serif", // 统一字体
        },
      };
      chart.setOption(option);

      // Handle window resize
      const handleResize = () => {
        chart.resize();
        updatePiePosition();
      };
      window.addEventListener("resize", handleResize);

      // Ensure proper cleanup
      onUnmounted(() => {
        window.removeEventListener("resize", handleResize);
        chart.dispose();
      });
    }
  });

  // 计算容器样式
  const containerStyle = computed(() => {
    return {
      width: typeof props.width === "number" ? `${props.width}px` : props.width,
      height:
        typeof props.height === "number" ? `${props.height}px` : props.height,
    };
  });
</script>

<style lang="scss" scoped>
  .chart-main-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .chart-wrapper {
      position: relative;
      width: 250px; // 保持与图表相同的宽度
      height: 250px; // 保持与图表相同的高度
      margin: 0 auto; // 水平居中
    }

    .chart {
      position: relative;
      width: 100%;
      height: 100%;

      .chart-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }
    }

    .chart-pie {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 50%;
      height: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: white;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      aspect-ratio: 1/1;

      .content {
        text-align: center;
        .num {
          font-size: 24px;
          font-weight: bold;
          color: #333;
        }
        .unit {
          font-size: 14px;
          color: #666;
          margin-top: 5px;
        }
      }
    }
  }
</style>
